<template>
  <el-config-provider
    :size="currentSize"
    :locale="zhCn">
    <slot></slot>
  </el-config-provider>
</template>

<script name="ConfigGlobal" setup>
import { computed, watch, onMounted } from 'vue'
import { useWindowSize } from '@vueuse/core'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { useAppStore, useSettingsStore } from '@/store'

const appStore = useAppStore()

const settingsStore = useSettingsStore()

const currentSize = computed(() => settingsStore.getCurrentSize)

const { width } = useWindowSize()

// 初始化所有主题色
onMounted(() => {
  settingsStore.setCssVarTheme()
})

// 监听窗口变化
watch(
  () => width.value,
  (width) => {
    if (width < 992) {
      !appStore.getMobile ? appStore.setMobile(true) : undefined
      appStore.setCollapse(false)
      appStore.setMobileShow(false)
    } else {
      appStore.getMobile ? appStore.setMobile(false) : undefined
    }
  },
  {
    immediate: true
  }
)
</script>
